<script setup>
// import * as echarts from 'echarts';
// // import shenzhenMap from '@/utils/shenzhen.json'
// import shenzhenMap from '@/utils/map/map.nanshan.json'
//
// console.log(shenzhenMap);
// echarts.registerMap("shenzhen", shenzhenMap);
// const width = ref(300)
// const height = ref(440)
//
// function initMapChart(data = []) {
//   width.value = myChart.value.offsetWidth - 1
//   let chart = echarts.init(document.getElementById("myEchartsMap"), "purple-passion");
//   console.log(shenzhenMap)
//   chart.setOption({
//     backgroundColor: '#fff',
//     color:"#409EFF",
//     geo: {  // 地理坐标系组件
//       map: 'shenzhen',
//       label: {
//         show: true
//       },
//       itemStyle: {  // 这里的item就是上面说的地图的单位，在深圳地图上就是每个区
//         normal: {
//           areaColor: '#ffffff',
//           borderColor: '#409EFF'
//         }
//       },
//       emphasis: {
//         areaColor: '#409EFF'
//       }
//     },
//     legend: [
//       {
//         selectedMode: false,
//       }],
//     tooltip: {
//       trigger: 'item', // 触发类型
//       // 自定义显示内容
//       formatter: function (params) {
//         // console.log(params)
//         if(!params.data){
//           return params.name +": 暂无设备";
//         }
//         return params.name +': 摄像头数量:'+params.data.monitorCount +"  读卡器数量:"+params.data.readerCardCount;
//       }
//     },
//     series: [
//       {
//         name: '设备分布',
//         type: 'map',
//         map: 'shenzhen',
//         label: {
//           show: true
//         },
//         data: data,
//       }
//     ]
//   })
// }

// onMounted(()=>{
//   initChart()
// })

// const myChart = ref(null)


import {listAllSurveillance} from "@/api/homePage"
import {onMounted, onUnmounted} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const width = ref(300)
const height = ref(440)
let map = ref(null);



onUnmounted(() => {
  map?.value.destroy();
});

function initMapChart(queryFormParams) {
  window._AMapSecurityConfig = {
    // securityJsCode: "8d48073d32271fd5efeabb0deddc8c9a",
    securityJsCode: "c382c0049c3c696dd79d1ef3fe3f97e6",//我自己的
    // securityJsCode: "",//测试
  };
  AMapLoader.load({
    // key: "cc8e6b43dfaa972f4580e408bec160d4", // 申请好的Web端开发者Key，首次调用 load 时必填
    key: "8b9117961d161676d87296dc00e26eff", // 我自己的
    // key: "8cc0cd111bf3ecbb9ca04c811f2ba0a9", // 申请好的Web端开发者Key，首次调用 load 时必填 测试
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  }).then((AMap) => {
    map.value = new AMap.Map("myEchartsMap", {
      // 设置地图容器id
      // viewMode: "3D", // 是否为3D地图模式
      zoom: 14, // 初始化地图级别
      center: [113.909471431053490, 22.512336978564804], // 初始化地图中心点位置
    });
    listAllSurveillance(queryFormParams).then(res => {
      const marks=[];
      res.data.forEach(item => {
        if (item.latitude && item.longitude) {
          console.log(item.longitude, item.latitude, '--->')
          // 添加一个标记点
          const marker= new AMap.Marker({
            position: [item.longitude, item.latitude],
            map: map.value,
            title: item.name,
            extData:{
              deviceStatus:item.deviceStatus,
              deviceNumber:item.deviceNumber,
              community:item.community,
              residentialName:item.residentialName,
              deviceName:item.deviceName,
            }
          });
          const content = `<div class="map-infowindow">
          <ul>
            <li>街道: ${item.streetName}</li>
             <li>社区: ${item.community}</li>
            <li>小区: ${item.residentialName}</li>
            <li>投放地点名称: ${item.deviceName}</li>
            <li>设备编号: ${item.deviceNumber}</li>
            </ul>
          <div>              `
          content.replace(/undefined/g, "");
          // 点标记点击事件
          marker.on('click', function(e) {
            // 信息窗口
            var infoWindow = new AMap.InfoWindow({
              content: content, // 信息窗口内容
              anchor: "top",
              // size: new AMap.Size(200, 200), // 信息窗口大小
              offset: new AMap.Pixel(30, 0) // 信息窗口偏移位置
            });
            infoWindow.open(map.value, marker.getPosition(item.longitude,item.latitude)); // 打开信息窗口，并关联点标记位置
          });

          //
          // // 窗体信息
          // let infoWindow = new AMap.InfoWindow({
          //   content: content, //使用默认信息窗体框样式，显示信息内容
          //   offset: new AMap.Pixel(0, -15),
          // });
          // //监听marker的点击事件



        }
      })

    })


  }).catch((e) => {
    console.log(e);
  });
}

defineExpose({
  initMapChart
})
</script>

<template>
  <div class="echarts-box" ref="myChart">
    <div id="myEchartsMap" :style="{ minWidth: width+'px',width:'100%', height: height+'px' }"></div>
  </div>
</template>
<style>
.echarts-box {
  width: 100%;
}
</style>
